$(document).ready(function() {
	// 第一次调用
	moveLeft()
	showOrHide()
})

/**
 * 为banner区域设置鼠标事件
 */
function showOrHide() {
	// 设置鼠标移入/移出的事件
	$('#banner').mouseover(function() {
		$('ul#icoList').show()
		$('#banner>p').show()
	}).mouseout(function() {
		$('ul#icoList').hide()
		$('#banner>p').hide()
	})
	// 触发鼠标移出事件，相当于是人鼠标从div中移出
	$('#banner').mouseout()
}

// 当前时刻整体滚动的位置，实际是ul#imgList的margin-left
// 0~-3600
// 0 ~ -900：正在滚第一张
// -900 ~ -1800：：正在滚第二张
// -1800 ~ -2700：：正在滚第三张
// -2700 ~ -3600：：正在滚第四张
// 500 / 900 = 0.6 =》 0
// 1200 / 900 = 1.X =》 1
let left = 0

/**
 * 初始化轮播
 */
function moveLeft() {
	let time = left % 900 === 0 ? 5000 : 10
	if(left <= -3600) {
		left = 0
	}
	$('ul#imgList').css('margin-left', left + 'px')
	// 计算现在正在滚动第几张
	// 先将left置为正数，再除以900，结果向下取整
	let i = Math.floor(-left / 900)
	// 整张的时候再去切换图标
	if(left % 900 === 0) {
		changeIco(i)
	}
	// 如果left每次减少11，left能不能达到-900值？不能
	left -= 10 // 这个值一定要能被图片宽度整除 // -900
	// 过段时间再改一次，延迟递归
	// 时间间隔大，代表速度慢，时间间隔小，代表速度快
	setTimeout(moveLeft, time)
}

/**
 * @param {Object} i 图片的索引（0-3）
 */
function changeImg(i) {
	// i:0，显示第一张，left:0
	// i:1，显示第二张，left:-900
	left = -i * 900
	// 假设left改的时候是整张停顿的时候，不会立马修改margin-left，需要手动改一次
	$('ul#imgList').css('margin-left', left + 'px')
	// 修改对应的图标背景
	changeIco(i)
}

/**
 * @param {Object} i 图片的索引（0-3）
 */
function changeIco(i) {
	// i:0，显示第一张图片，第一个图标变红
	// i:1，显示第二张图片，第二个图标变红
	$('ul#icoList>li>p').css('background-color', 'rgba(0, 0, 0, .5)')
						.eq(i).css('background-color', '#F00')
}

/**
 * 切换到上一张
 */
function prev() {
	// 计算当前正在滚几张
	let i = Math.floor(-left / 900) // 0-3
	let prev
	if(i < 1) {
		// 第一张
		prev = 3
	} else {
		// 非第一张
		prev = i - 1
	}
	changeImg(prev) // 0-3
}
/**
 * 切换到下一张
 */
function next() {
	// 计算当前正在滚几张
	let i = Math.floor(-left / 900)
	let next
	if(i === 3) {
		// 最后一张
		next = 0
	} else {
		// 非最后一张
		next = i + 1
	}
	changeImg(next)
}